<template>
  <div >
      <!-- 设备 类型管理 -->
    <div class='app-container'>
      <el-form ref="form" label-width="100px" inline :model="form" >
  <el-form-item label="型号搜索：" >
    <el-input v-model="form.taskCode" palceholder='请输入'></el-input>
  </el-form-item>
  
  

  <el-form-item>
    <el-button type="primary" @click='search'><i class="el-icon-search"></i>查询</el-button>
  </el-form-item>
  </el-form>
    </div> 


  <div class='app-container'>
   <el-card shadow="always">
      <el-button type="primary" class='config1' icon="el-icon-plus" @click="add">新建</el-button>
    </el-card>
    <el-table style="width: 100%" :data='shjlxlblist'>
      <el-table-column
        label="序号"
        type='index'
        :index='getIndex'
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="型号名称"
        >
      </el-table-column>
      <el-table-column
        prop="model"
        label="型号编码">
      </el-table-column>

         <el-table-column
        prop="image"
        label="设备图片">
        <template  slot-scope="scope">
        <img :src="scope.row.image" alt="" :style="[{width:'33px'},{height:'33px'},{borderRadius:'20PX'}]">
      </template>
      </el-table-column>

       <el-table-column
        prop="vmRow"
        label="货道行">
        </el-table-column>
        <el-table-column
        prop="vmCol"
        label="货道列">
      </el-table-column>
      <el-table-column
        prop="channelMaxCapacity"
        label="设备容量">
      </el-table-column>
      <el-table-column
        label="操作">
        <template #default='{row}'>
        <el-button type="text" @click='edit(row)'>修改</el-button>
        <el-button type="text" @click='del(row.typeId)'>删除</el-button>
        </template>
      </el-table-column>
      
    </el-table>
      <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
      <el-button type="primary" 
      @click=shjlxlbAp(-1) :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click=shjlxlbAp(1)>下一页</el-button>
      </el-button-group>
        </div>
      </div>
    </div>

    
  <add :visible.sync='visible' ref='add'></add>

  </div>
</template>

<script>
import Add from './components/add.vue'
import {searchApi,gettstatus} from '@/api/order'

import { shjlxlbApi , delshjApi  } from '@/api/DeviceTypeManagement'
export default {
  name: 'HrsaasIndex',
  components:{
    Add,
  },
  data() {
    return {
      form:{
        taskCode: '',
      },
        list:[],
        visible:false,
    
        row:{},
        params:{
          pageIndex: 0,
          pageSize: 10,
          totalCount:0,
          totalPage:0,
          isRepair: false
        },
        // 状态
        status:[],

        // 获取  售货机类型列表(搜索)     渲染主页面
        shjlxlblist:[],

        // 点击修改   获取对象
        xzgdrow:{},
    };
  },

  created() {
    this.gettstatus()

// 获取  售货机类型列表(搜索)     渲染主页面
    this.shjlxlbAp()
  },

  methods: {
   
    // 新增工单
    add(row){
      this.visible=true
        console.log(row,'111111111111');
    },

    //  编辑工单
    edit(row){
    this.$refs.add.form = {...row }
     this.visible = true
     this.$refs.add.fileList = [{ name: 'default', url: `${row.image}` }]

    },


    // 删除工单
    async del(typeId){
      console.log(typeId);
       await this.$confirm('您确定删除该员工吗', '提示', {
      type: 'warning'
    })
    await delshjApi(typeId)
    this.$message.success('删除成功')
    this.shjlxlbAp()
    },
   


    // 查询
   async search(){
      const res= await shjlxlbApi(this.form)
      console.log(res,'hhhhhhhhh');
      this.shjlxlblist=res.currentPageRecords
    },


  // 排序延续
  getIndex (index) {
  const page = this.params.pageIndex
  const pagesize = this.params.pageSize//当前页数 - 1*每页数据条数 + index + 1
  return (page - 1) * pagesize + index + 1},


  // 获取工单状态
  async gettstatus(){
    const res = await gettstatus()
    // console.log(res,'能获取工单状态吗');
    this.status=res
  },
 

//  获取  售货机类型列表(搜索)     渲染主页面
   async shjlxlbAp(num=0){
     this.params.pageIndex=+this.params.pageIndex+num
      const res =  await shjlxlbApi(this.params)
       console.log(res,'渲染主页面');

      this.params.pageIndex=res.pageIndex
      this.params.totalPage=res.totalPage

      //  console.log(res,'售货机类型详情');    //currentPageRecords
       this.shjlxlblist = res.currentPageRecords

        this.shjlxlblist.forEach(ele => {
        ele.method = '手动'
      })
      this.params.totalCount = parseInt(res.totalCount)
      // console.log(this.list,'真个页面结果是什么');

   }

  },
};
</script>

<style lang="scss" scoped>
.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.config{
  background-color: #fbf4f0;
  color:#655b56;
  border:none;
  cursor: pointer;
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
.el-table{
  padding: 10px;
  border:none
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
    
  }
}
</style>